import React, { useEffect, useRef, useState } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { Message } from '@arco-design/web-react';
// import { apiUploadFile } from '../page/resource/oss/api';
import LoadingMask from './loadingMask';

interface Props {
  className?: string;
  value?: any;
  placeholder?: string;
  editorClassName?: string;
  /** 返回带带标签的字符串 */
  onChange?: (v: string) => void;
  /** 返回用户输入的纯文字字符串 */
  onTextChange?: (v: string) => void;
}

const toolBarConfig: Partial<IToolbarConfig> = { excludeKeys: ['group-video'] };
const editorConfig: Partial<IEditorConfig> = {
  placeholder: '请输入内容...',
  autoFocus: false,
  customAlert: (s: string, t: string) => {
    switch (t) {
      case 'success':
        Message.success(s);
        break;
      case 'info':
        Message.info(s);
        break;
      case 'warning':
        Message.warning(s);
        break;
      case 'error':
        Message.error(s);
        break;
      default:
        Message.info(s);
        break;
    }
  },
  MENU_CONF: {
    uploadImage: {
      async customUpload(file: File, insertFn: any) {
        Message.error('缺少上传接口');
        // LoadingMask.show('正在上传...');

        // try {
        //   let res = await apiUploadFile(file);
        //   let data = res.data;
        //   if (data.code === 200) {
        //     Message.success(data.data.fileName + '上传成功');
        //     insertFn(data.data.url, data.data.fileName, '');
        //   } else {
        //     Message.warning(data.data.fileName + (data.msg ?? '上传失败'));
        //   }
        // } catch (e: any) {
        //   Message.error(e.message ?? '上传失败');
        // } finally {
        //   LoadingMask.hide();
        // }
      },
    },
  },
};

export default function HtmlEditor(props: Props) {
  const [editor, setEditor] = useState<IDomEditor | null>(null);
  const propsRef = useRef(props);
  const [htmlValue, setHtmlValue] = useState('');
  let { className, editorClassName } = props;
  useEffect(() => {
    propsRef.current = props;
    setHtmlValue(props.value);
  }, [props]);
  useEffect(() => {
    return () => {
      if (!editor) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  function handleChange(ed: IDomEditor) {
    let html: string = ed.getHtml();
    let text: string = ed.getText();
    if (propsRef.current.onChange && html !== propsRef.current.value) {
      propsRef.current.onChange(html);
    }
    if (propsRef.current.onTextChange && text !== propsRef.current.value) {
      propsRef.current.onTextChange(text);
    }
  }

  return (
    <div className={`html-editor ${className}`}>
      <Toolbar className="tool-bar" editor={editor} defaultConfig={toolBarConfig} mode="default" />
      <Editor
        className={editorClassName}
        defaultConfig={Object.assign({}, editorConfig, {
          placeholder: propsRef.current.placeholder ?? editorConfig.placeholder,
        })}
        value={htmlValue}
        onCreated={setEditor}
        onChange={handleChange}
        mode="default"
      />
    </div>
  );
}
